<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl">

	<head>
		<title>cSans - Buton demo</title>

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" />

		<link rel="stylesheet" href="../csans/csans.css" type="text/css" />
		<link rel="stylesheet" href="../csans/grid-950-24-10/css/csans-grid-950-24-10.css" type="text/css" />
		<link rel="stylesheet" href="../csans/button/csans-button.css" type="text/css" />

		<style type="text/css">
			a.customized,
			.customized a,
			.customized span {
				background-image: url(img/button2.png);
				}
			a.customized,
			.customized a {
				color: #fff;
				font-weight: bold;
				}
			a.customized:hover,
			a.customized.select,
			.customized a:hover,
			.customized .select a {
				color: #000;
				}
		</style>
	</head>

	<body>
		<div class="page">
			<div class="row t4 b8">
				<h1 class="col11 r1">cSans button demo</h1>
				<p class="col12 last">
					You can create tabs and buttons with hover/select efects and variable width/height with only one image.
					The only requirements is the use of a span inside of the links and the distance between normal and hover/select state must be 70px:<br />
					<img class="t2" src="img/button-metric.png" alt="distance: 70px" />
				</p>
			</div>
			
			
			<div class="row b4">
				<h4>Default style</h4>
				<p>The Four has .select class</p>
				<ul class="button">
					<li><a href="#"><span>Option</span></a></li>
					<li><a href="#"><span>Second option</span></a></li>
					<li><a href="#"><span>Third option</span></a></li>
					<li class="select"><a href="#"><span>Four option</span></a></li>
					<li><a href="#"><span>Five option</span></a></li>
				</ul>
				
				<h4>With fixed width:</h4>
				<ul class="button">
					<li class="col4"><a href="#"><span>Option</span></a></li>
					<li class="col4"><a href="#"><span>Second option</span></a></li>
					<li class="col4"><a href="#"><span>Third option</span></a></li>
					<li class="col4 select"><a href="#"><span>Four option</span></a></li>
					<li class="col4"><a href="#"><span>Five option</span></a></li>
				</ul>
				
				<h4>In a individual link:</h4>
				<p>This is an <a class="button" href="#"><span>Option</span></a> link</p>
				<p>And this is an selected <a class="button select" href="#"><span>Option</span></a> link</p>
			</div>
			
			<div class="row b4">
				<h4>Customized style</h4>
				<ul class="button customized">
					<li><a href="#"><span>Option</span></a></li>
					<li><a href="#"><span>Second option</span></a></li>
					<li><a href="#"><span>Third option</span></a></li>
					<li class="select"><a href="#"><span>Four option</span></a></li>
					<li><a href="#"><span>Five option</span></a></li>
				</ul>
				
				<h4>With fixed width:</h4>
				<ul class="button customized">
					<li class="col4"><a href="#"><span>Option</span></a></li>
					<li class="col4"><a href="#"><span>Second option</span></a></li>
					<li class="col4"><a href="#"><span>Third option</span></a></li>
					<li class="col4 select"><a href="#"><span>Four option</span></a></li>
					<li class="col4"><a href="#"><span>Five option</span></a></li>
				</ul>
				
				<h4>In a individual link:</h4>
				<p>This is an <a class="button customized" href="#"><span>Option</span></a> link</p>
				<p>And this is an selected <a class="button select customized" href="#"><span>Option</span></a> link</p>
			</div>
		</div>
	</body>
</html>